<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示用文档</title>
<link rel="stylesheet" type="text/css" href="start.css">
</head>

<body>
<div id="container">
	<div id="header" class="col-24 row-4 bg_3">
    	<h1 class="f-color-w">Bubalus Layout 实现复杂的栅格化布局</h1>
    </div>
	<div id="main">
    	<div class="col-container">
        	<div class="col-8 row-6 fl-le bg_5">
            	<p class="lh_back">
                    这个页面演示了如何使用 Bubalus Layout 来对页面进行栅格化布局，同时也示范了 Debug 模式中一些辅助调试的类。
                </p>
            </div>
            <div class="col-16 row-2 fl-ri bg_5"></div>
            <div class="col-16 row-4 fl-ri bg_5 grid_back"></div>
        </div>
    	<div class="clear"></div>
        
    	<div class="col-container">
        	<div class="col-4 row-2 fl-le bg_6"></div>
            <div class="col-20 row-2 fl-ri bg_6">
            	<div class="col-container">
                	<div class="sub_col-8 sub_row-2 fl-le bg_3"></div>
                	<div class="sub_col-12 sub_row-2 fl-ri bg_3"></div>
                </div>
            </div>
        </div>
    	<div class="clear"></div>
        
    	<div class="col-container">
        	<div class="col-6 row-2 fl-le bg_5"></div>
            <div class="col-18 row-2 fl-ri bg_5"></div>
        </div>
    	<div class="clear"></div>
        
    	<div class="col-container">
        	<div class="col-8 row-2 fl-le bg_6"></div>
            <div class="col-16 row-2 fl-ri bg_6"></div>
        </div>
    	<div class="clear"></div>
        
    	<div class="col-container">
        	<div class="col-10 row-2 fl-le bg_5"></div>
            <div class="col-14 row-2 fl-ri bg_5"></div>
        </div>
    	<div class="clear"></div>
        
    	<div class="col-container">
        	<div class="col-12 row-2 fl-le bg_6"></div>
            <div class="col-12 row-2 fl-ri bg_6"></div>
        </div>
    	<div class="clear"></div>
        
    	<div class="col-container">
        	<div class="col-6 row-2 fl-le bg_5"></div>
            <div class="col-6 row-2 fl-le bg_5"></div>
        	<div class="col-6 row-2 fl-ri bg_5"></div>
            <div class="col-6 row-2 fl-ri bg_5"></div>
        </div>
    	<div class="clear"></div>
        
    	<div class="col-container">
        	<div class="col-5 row-2 fl-le bg_6"></div>
            <div class="col-8 row-2 fl-le bg_6"></div>
            <div class="col-11 row-2 fl-ri bg_6"></div>
        </div>
    	<div class="clear"></div>
        
    	<div class="col-container">
        	<div class="col-3 row-2 fl-le bg_5"></div>
            <div class="col-5 row-2 fl-le bg_5"></div>
            <div class="col-8 row-2 fl-ri bg_5"></div>
            <div class="col-6 row-2 fl-ri bg_5"></div>
            <div class="col-2 row-2 fl-ri bg_5"></div>
        </div>
        
    </div>
    <div class="clear"></div>
    <div id="footer" class="col-24 row-2 bg_3"></div>
</div>

<a href="javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript('http://westciv.com/xray/thexray.js');" style="position:absolute; top:4px; left:4px; border: 1px solid rgb(170, 170, 170); padding: 0.5em 2em; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-decoration: none; font-weight: bold; text-shadow: 2px 2px 2px rgb(102, 102, 102); font-size: 1.2em;" title="XRAY!">用XRAY进行调试</a>
</body>
</html>
